import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.MapType;
import com.google.maps.controls.ControlPosition;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.ZoomControlOptions;
import com.google.maps.overlays.Marker;

import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFormat;
import flash.utils.flash_proxy;

import mx.core.UIComponent;

//***** GLOBAL VARIABLES ***************
private var isFullRes:Boolean = false;

private var g_mediaList:Array = new Array();	// the list of the pictures for the day
private var g_currPage:int = 1;	// current page of pictures
private var g_totalMedia:int = 0;	// total number of pictures, seeded w/ database value
private var g_mediaHeight:int = Common.MEDIA_HEIGHT;
private var g_mediaWidth:int = Common.MEDIA_WIDTH;
private var g_mediaFullHeight:int = Common.MEDIA_FULL_HEIGHT;
private var g_firstDate:Date, g_lastDate:Date;

// youtube video variables
Security.allowDomain("www.youtube.com");
private var youtubeLoader:Loader = new Loader();
private var youtubePlayer:Object;

// needed to work within mxml
private var base:UIComponent = new UIComponent();

/**
 * Draws the locations of the current day's photos on Google Maps
 */
private function onMapReady(event:Event):void {
	map.x = Common.LOCATION_X;
	map.y = Common.LOCATION_Y;
	map.width = Common.LOCATION_WIDTH;
	map.height = Common.LOCATION_HEIGHT;
	var zoom:ZoomControl = new ZoomControl(new ZoomControlOptions
	({	buttonStyle: null, 
		buttonSize: null, 
		buttonSpacing: null, 
		hasScrollTrack: false }));
	var topLeft:ControlPosition = new ControlPosition(ControlPosition.ANCHOR_TOP_LEFT, 16, 10);
	zoom.setControlPosition(topLeft);
	map.addControl(zoom);
	map.enableContinuousZoom();
	map.enableScrollWheelZoom();
	map.addControl(new MapTypeControl());
	
	var latLong:LatLng;
	var lat:Number, long:Number;
	var centerLat:Number = 0;
	var centerLong:Number = 0;
	var marker:Marker;
	var bounds:LatLngBounds = new LatLngBounds();
	for(var i:int = 0; i < g_mediaList.length; i++) {
		lat = g_mediaList[i].getLatitude();
		long = g_mediaList[i].getLongitude();
		
		// add the new marker to the map
		latLong = new LatLng(lat, long); 
		map.addOverlay(new Marker(latLong));
		
		// expand the bounds of the current range
		bounds.extend(latLong);
		
		// for calculating the center of the images
		centerLat += lat;
		centerLong += long;
	}
	centerLat = centerLat / g_totalMedia;
	centerLong = centerLong / g_totalMedia;
	
	map.setCenter(new LatLng(centerLat, centerLong));
	map.setMapType(MapType.NORMAL_MAP_TYPE);
	map.setZoom(map.getBoundsZoomLevel(bounds)); // zoom level determined by the range of the points
}

/** 
 * Creates the entire webpage
 */
public function initWebpage():void {
	// retrieves data from database and draws data dependent parts of site
	getDatabaseVariables();
	
	// static parts of the site (i.e. don't depend on the database)
	displayFilterMenu();
//	displayButtons();
	
	// everything is built with "base," so make sure to add it to the Flash!
	this.addChild(base);
	
	// set the mouse interactions
	initMouse();
	
	// DEV ONLY: draw a border so we can see where the end of the flash is
//	drawBorder();
}

/**
 * Pulls necessary variables from the database
 */
private function getDatabaseVariables():void {
	var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, parseXMLAndDrawAll); 
	loader.load(new URLRequest(Common.XML_FILE));
}

/**
 * 1) Parse the XML after it has finished loading
 * 2) Draw the elements of the site that depend on database variables
 */
private function parseXMLAndDrawAll(event:Event):void {
	var xml:XML = new XML(event.target.data);
	
	// add the photos to an array
	var currXML:XML;
	var media:Media;
	
	// xml.total is the 0th child of the xml, so we start from i=1 not i=0
	for(var i:int = 1; i <= xml.total; i++) {
		currXML = xml.children()[i];

		// null parent_ids mean that this is a piece of media (not an annotation)
		if(currXML.@parent_id == "NULL") {
			media = new Media(currXML.name(), currXML.@id, currXML.@time_captured, currXML.@latitude,
				currXML.@longitude, currXML.@altitude, currXML.@url, null);
			g_mediaList[g_totalMedia] = media;
			
			if(i == 1) {	// get first date
				g_firstDate = media.getDate();
				trace(g_firstDate);
			}
			
			g_totalMedia++;
		} else {	// this is an annotation
					// add it to the correct parent media
			// iterate through the current list of media
			for(var j:int = 0; j < g_totalMedia; j++) {
				// found the related media!
				if (g_mediaList[j].getId() == currXML.@parent_id) {
					g_mediaList[j].setAnnotation(currXML.@url);
					break;
				}
			}
		}
	}
	
	// Draw database dependent site portions
	displayTitle();
	displayWeather();
//	displayDate();
	if(g_totalMedia > 0) {
		displayMedia(1); // draw the framework for picture display
		displayTimeline();
	}
}

// ******** MOUSE INTERACTIONS **********/
private function initMouse():void {
	this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
	this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
	this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
	//			this.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
}

// ******** TOP OF SCREEN ********/
private function displayTitle():void {
	// wrapper
	var border:Sprite = new Sprite();
	border.x = Common.TITLE_X;
	border.y = Common.TITLE_Y;
//	border.graphics.lineStyle(5, 0xFF0000);
	
	var username:String = "Greg";	// TODO php call
	var location:String = "Japan";	// TODO php call
	var date:String = "June 24, 2009";	// TODO php call
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.bold = true;
	textStyle.size = 24;
	textStyle.align = "center";
	
	var titleText:TextField = new TextField();
	titleText.text = username + "\'s trip to " + location
						+ "\n" + date;
	titleText.width = Math.max(Common.TITLE_WIDTH, titleText.textWidth * (Number)(textStyle.size)/10);	
//	titleText.width = titleText.textWidth * (Number)(textStyle.size)/10;
	titleText.height = Common.TITLE_HEIGHT;
	titleText.setTextFormat(textStyle);
	
	border.graphics.drawRect(0, 0, titleText.width, titleText.height);
	border.addChild(titleText);
	
	base.addChild(border);
}

private function displayFilterMenu():void {
	// wrapper
	var border:Sprite = new Sprite();
	border.x = Common.FILTER_X;
	border.y = Common.FILTER_Y;
//	border.graphics.lineStyle(2, 0x000000);
	border.graphics.beginFill(0xCCCCCC, 1.0);
	border.graphics.drawRoundRect(0, 0, Common.FILTER_WIDTH, Common.FILTER_HEIGHT, 15);

	// menu header
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.bold = true;
	textStyle.size = 20;
	textStyle.align = "left";
	
	var headerText:TextField = new TextField();
	headerText.x = 10;
	headerText.width = Common.FILTER_WIDTH;
	headerText.height = Common.FILTER_HEIGHT;
	headerText.text = "Filter by:";
	headerText.setTextFormat(textStyle);
	border.addChild(headerText);
	
	// menu options
	textStyle.bold = false;
	var menuOptions:Array = new Array(	Common.FILTER_PICTURES,
										Common.FILTER_VIDEOS,
										Common.FILTER_AUDIO,
										Common.FILTER_NOTES);
	var optionText:TextField;
	var button:Sprite;
	for(var i:int = 0; i < menuOptions.length; i++) {
		// menu option text
		optionText = new TextField();
		optionText.width = Common.FILTER_WIDTH;
		optionText.y = headerText.y + headerText.textHeight * (i+1);
		optionText.selectable = false;
		optionText.text = menuOptions[i];
		optionText.setTextFormat(textStyle);
		border.addChild(optionText);
		
		// button overlay (for mouse interaction)
		button = new Sprite();
		button.buttonMode = true;
		button.name = optionText.text;
		button.graphics.beginFill(0xFF0000, 0.0);	// invisible button
		button.graphics.drawRect(optionText.x, optionText.y, Common.FILTER_WIDTH, headerText.textHeight);
		border.addChild(button);
	}
	
	base.addChild(border);
}

private function displayWeather():void {
	// wrapper
	var border:Sprite = new Sprite();
	border.x = Common.WEATHER_X;
	border.y = Common.WEATHER_Y;
	//	border.graphics.lineStyle(5, 0xFF0000);
	border.graphics.drawRect(0, 0, Common.WEATHER_WIDTH, Common.WEATHER_HEIGHT);
	
	// weather text
	// text formatting
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.size = 16;
	textStyle.align = "center";
	
	// text
	var text:TextField = new TextField();
	text.wordWrap = true;
	text.width = Common.WEATHER_WIDTH;
	text.text = "Weather that day:";
	text.setTextFormat(textStyle);
	border.addChild(text);
	
	// TODO draw the appropriate weather icon
	var urlRequest:URLRequest = new URLRequest(Common.STORM);
	var loader:Loader = new Loader();
	loader.y = text.textHeight;
	loader.load(urlRequest);
	loader.contentLoaderInfo.addEventListener(Event.INIT, weatherImageLoad);
	
	border.addChild(loader);
	base.addChild(border);
}

private function weatherImageLoad(event:Event):void {
	var loader:Loader = Loader(event.target.loader);
	loader.width = Common.WEATHER_ICON_WIDTH;
	loader.height = Common.WEATHER_ICON_HEIGHT;
	loader.x = Common.WEATHER_WIDTH/2 - loader.width/2;
}

// ********** MAIN MEDIA STREAM ****************/
public function displayMedia(currPage:int):void {
	// draw the wrapper that contains all of the picture elements
	var border:Sprite = new Sprite();
	border.x = Common.MEDIA_X;
	border.y = Common.MEDIA_Y;
//	border.graphics.lineStyle(5, 0xFF0000);
	border.graphics.drawRect(0, 0, g_mediaWidth, g_mediaFullHeight);
	border.name = Common.PICTURE_WRAPPER;
	base.addChild(border);
	
	// draw the picture thumbnails
	var mediaContainer:Sprite;
	var colSpace:int = Common.COL_SPACE;
	var tempIndex:int = 1;	// used to calculate actual media index
	var currIndex:int;		// media index
	var mediaWidth:int = Common.THUMB_WIDTH; // width of the media
	var currMedia:Media;
	var numPicsPerPage:int = g_mediaWidth / Common.THUMB_WIDTH;
	var lastRowHeight:int = Common.THUMB_HEIGHT;	// the y-coordinate of the last row
	for (var x:int = 0; x <= g_mediaWidth; x += mediaWidth + colSpace) {
		currIndex = (currPage-1) * numPicsPerPage + tempIndex - 1;
		
		// can't draw more than the total number of pics
		if (currIndex < g_totalMedia) {
			currMedia = g_mediaList[currIndex];
			
			// draw the media 
			mediaContainer = new Sprite();
			mediaContainer.x = x;
			mediaContainer.y = 0;
			mediaContainer = currMedia.drawMedia(mediaContainer);
			mediaWidth = currMedia.getMediaWidth();
			border.addChild(mediaContainer);
			
			// annotations
			var textStyle:TextFormat = new TextFormat();
			textStyle.font = "Calibri";
			textStyle.size = 14;
			textStyle.align = "center";
			
			var annot:TextField = new TextField();
			annot.wordWrap = true;
			// include the timestamp in the annotation
			annot.text = formatDate(currMedia.getDate());
			var actualAnnotation:String = currMedia.getAnnotation();
			if (actualAnnotation != null) {	
				annot.text += "\n" + actualAnnotation;
			}
			annot.x = mediaContainer.x;
			annot.y = Common.THUMB_HEIGHT;
			annot.width = mediaWidth;
			annot.height = Common.MEDIA_FULL_HEIGHT - Common.MEDIA_HEIGHT;
			annot.setTextFormat(textStyle);
			border.addChild(annot);
			
			tempIndex++;
		} else {
			break;
		}
	}
	
	// draw the "view all pictures" link
	//border.addChild(drawViewAllLink(lastRowHeight));
	
	// draw masks so that the previews don't extend beyond the media stream borders
	border = drawMediaStreamMasks(border);
	
	// draw the picture navigation buttons
	if (currPage != 1) { // the first page doesn't have a back button
		border.addChild(drawPicBackButton());
	}
	
	// the last page doesn't have forward button
	if (currPage * numPicsPerPage < g_totalMedia) {
		border.addChild(drawPicForwardButton());
	}
}

/**
 * Draw masks so that the previews don't extend beyond the media stream borders
 */
private function drawMediaStreamMasks(container:Sprite):Sprite {
	// mask for the left side of the media stream
	var mask:Sprite = new Sprite();
	mask.graphics.beginFill(Common.BACKGROUND_COLOR, 1.0);
	mask.graphics.drawRect(-Common.BUFFER_SIDE, 0, Common.BUFFER_SIDE, Common.MEDIA_FULL_HEIGHT);
	container.addChild(mask);
	
	// mask for the right side of the media stream
	mask = new Sprite();
	mask.graphics.beginFill(Common.BACKGROUND_COLOR, 1.0);
	mask.graphics.drawRect(Common.MEDIA_WIDTH, 0, Common.BUFFER_SIDE, Common.MEDIA_FULL_HEIGHT);
	container.addChild(mask);
	
	return container;
}

/**
 * Return the date in the format
 * Sunday, April 5, 9:45am
 */
private function formatDate(date:Date):String {
	// get the date in the format "Sunday, March 15"
	var dateStr:String = Common.WEEKDAYS[date.getDay()] + ", "
						+ Common.MONTHS[date.getMonth()] + " "
						+ date.getDate();
	
	// get the time in the format HH:MM:SS AM/PM
	var time:String = date.toLocaleTimeString();
	
	// convert it to the format HH:MM AM/PM
	time = time.substring(0, 5) + " " + time.substring(9, 11);
	
	return dateStr + ", " + time;
}

private function drawViewAllLink(lastRowHeight:int):Sprite {
	var border:Sprite = new Sprite();
	
	// text formatting
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.size = 20;
	textStyle.align = "right";
	textStyle.underline = true;
	textStyle.color = 0x0000FF;
	
	// actual text
	var myText:TextField = new TextField();
	myText.width = g_mediaWidth/2;	
	myText.height = Common.THUMB_HEIGHT;
	myText.text = "View all pictures (" + g_totalMedia + " total)";
	myText.x = g_mediaWidth/2;
	myText.y = lastRowHeight + 5;
	myText.setTextFormat(textStyle);
	border.addChild(myText);
	
	// add a button overlay for mouse interaction
	var buttonOverlay:Sprite = new Sprite();
	buttonOverlay.x = myText.x;
	buttonOverlay.y = myText.y;
	buttonOverlay.graphics.beginFill(0xFF0000, 0.0);
	buttonOverlay.graphics.drawRect(0, 0, myText.width, myText.textHeight);
	buttonOverlay.name = Common.VIEW_ALL_PICS;
	buttonOverlay.buttonMode = true;
	border.addChild(buttonOverlay);
	
	return border;
}

private function drawPicBackButton():Sprite {
	var button:Sprite = new Sprite();
	
	// draw rectangle outline
	button.x = -Common.PIC_BUTTON_WIDTH/2;
	button.y = g_mediaHeight/2 - Common.PIC_BUTTON_HEIGHT/2;
	button.graphics.beginFill(0xCCCCCC, 0.7);
	button.graphics.drawRoundRect(0, 0, Common.PIC_BUTTON_WIDTH, Common.PIC_BUTTON_HEIGHT, Common.PIC_BUTTON_WIDTH/2);
	button.graphics.endFill();
	button.graphics.lineStyle(10, 0x000000, 1.0);
	button.graphics.moveTo(Common.PIC_BUTTON_WIDTH - Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_BUFFER);
	button.graphics.lineTo(Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_HEIGHT/2);
	button.graphics.lineTo(Common.PIC_BUTTON_WIDTH - Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_HEIGHT - Common.PIC_BUTTON_BUFFER);
	
	// button metadata
	button.name = Common.PIC_BACK_BUTTON;
	button.buttonMode = true;
	return button;
}

private function drawPicForwardButton():Sprite {
	var button:Sprite = new Sprite();
	
	// draw rectangle outline
	button.x = g_mediaWidth - Common.PIC_BUTTON_WIDTH/2;
	button.y = g_mediaHeight/2 - Common.PIC_BUTTON_HEIGHT/2;
	button.graphics.beginFill(0xCCCCCC, 0.7);
	button.graphics.drawRoundRect(0, 0, Common.PIC_BUTTON_WIDTH, Common.PIC_BUTTON_HEIGHT, Common.PIC_BUTTON_WIDTH/2);
	button.graphics.endFill();
	button.graphics.lineStyle(10, 0x000000, 1.0);
	button.graphics.moveTo(Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_BUFFER);
	button.graphics.lineTo(Common.PIC_BUTTON_WIDTH - Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_HEIGHT/2);
	button.graphics.lineTo(Common.PIC_BUTTON_BUFFER, Common.PIC_BUTTON_HEIGHT - Common.PIC_BUTTON_BUFFER);
	
	//	// draw arrow shape
	//	button.graphics.beginFill(0x000000, 1.0);
	//	var buffer:Number = Common.PIC_BUTTON_WIDTH/5;
	
	//	var buffer2:Number = Common.PIC_BUTTON_WIDTH/5;
	//	var vertices:Vector.<Number> = Vector.<Number>([
	//		Common.PIC_BUTTON_WIDTH - buffer, Common.PIC_BUTTON_HEIGHT/2,
	//		buffer2, Common.PIC_BUTTON_HEIGHT - buffer2,
	//		buffer2, buffer2
	//	]);
	//	var indices:Vector.<int> = Vector.<int>([0, 1, 2]);
	//	button.graphics.drawTriangles(vertices, indices);
	//	button.graphics.endFill();
	
	// button metadata
	button.name = Common.PIC_FORWARD_BUTTON;
	button.buttonMode = true;
	return button;
}

/** 
 * navigates between different pages of pictures
 */
private function redrawPictures(currPage:int):void {
	// remove the current page of pictures
	base.removeChild(base.getChildByName(Common.PICTURE_WRAPPER));
	
	// draw new page of pictures
	displayMedia(currPage);
}

/**
 * Draw the timeline of a single day
 */
private function displayTimeline():void {
	var border:Sprite = new Sprite();
	border.x = Common.TIMELINE_X;
	border.y = Common.TIMELINE_Y;
//	border.graphics.lineStyle(3, 0xFF0000);
//	border.graphics.beginFill(0xFF0000, 1.0);
	border.graphics.drawRect(0, 0, Common.TIMELINE_WIDTH, Common.TIMELINE_HEIGHT);
	base.addChild(border);
	
	// timeline line
	var timeline:Sprite = new Sprite();
	timeline.x = 0;
	timeline.y = 3*Common.TIMELINE_HEIGHT/4;
	timeline.graphics.lineStyle(5, Common.TIMELINE_COLOR);
	timeline.graphics.lineTo(Common.TIMELINE_WIDTH, 0);
	border.addChild(timeline);
	
	//left side
	timeline.graphics.moveTo(0, -Common.TIMELINE_TICK);
	timeline.graphics.lineTo(0, Common.TIMELINE_TICK);
	
	// timeline ticks
	
	// right side
	timeline.graphics.moveTo(Common.TIMELINE_WIDTH, -Common.TIMELINE_TICK);
	timeline.graphics.lineTo(Common.TIMELINE_WIDTH, Common.TIMELINE_TICK);
}

private function displayVideos():void {
	var border:Sprite = new Sprite();
	border.x = Common.VIDEO_X;
	border.y = Common.VIDEO_Y;
	//	border.graphics.lineStyle(5, 0xFF0000);
	//	border.graphics.drawRect(0, 0, Common.VIDEO_WIDTH, Common.VIDEO_HEIGHT);
	
	// The player SWF file on www.youtube.com needs to communicate with your host
	// SWF file. Your code must call Security.allowDomain() to allow this
	// communication.
	//	Security.allowDomain("www.youtube.com");
	
	youtubeLoader.load(new URLRequest("http://www.youtube.com/v/O4pPQVLwPB8?version=3"));
	youtubeLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onVideoLoaded);
	
	border.addChild(youtubeLoader);	
	base.addChild(border);
}

private function onVideoLoaded(event:Event):void {
	youtubeLoader.content.addEventListener("onReady", onPlayerReady);
}

private function onPlayerReady(event:Event):void {
	// Event.data contains the event parameter, which is the Player API ID 
	trace("player ready:", Object(event).data);
	
	// Once this event has been dispatched by the player, we can use
	// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
	// to load a particular YouTube video.
	// This will hold the API player instance once it is initialized.
	youtubePlayer = youtubeLoader.content;
	
	// Set appropriate player dimensions for your application
	youtubePlayer.setSize(Common.VIDEO_WIDTH, Common.VIDEO_HEIGHT);
	youtubePlayer.setPlaybackQuality("small");
}

// ******** NAVIGATION BUTTONS ********/
private function displayButtons():void {
	displayLeftButton();
	displayRightButton();
}

private function displayLeftButton():void {
	// button
	var border:Sprite = new Sprite();
	border.x = Common.LBUTTON_X;
	border.y = Common.LBUTTON_Y;
	border.graphics.lineStyle(3, Common.BUTTON_OUTLINE);
	border.graphics.beginFill(Common.BUTTON_FILL, 1.0);
	border.graphics.drawRoundRect(0, 0, Common.BUTTON_WIDTH, Common.BUTTON_HEIGHT, Common.BUTTON_HEIGHT);
	base.addChild(border);
	
	// button text
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.size = Common.BUTTON_FONT_SIZE;
	textStyle.align = "center";
	textStyle.color = 0xFFFFFF;
	
	var myText:TextField = new TextField();
	myText.width = Common.BUTTON_WIDTH;	
	myText.height = Common.BUTTON_HEIGHT;
	myText.y = Common.BUTTON_TEXT_Y;
	myText.text = "<< Previous travel day";
	myText.setTextFormat(textStyle);
	border.addChild(myText);
	
	// top layer sprite for mouse interaction
	var button:Sprite = new Sprite();
	button.graphics.beginFill(Common.BUTTON_FILL, 0.0);
	button.graphics.drawRect(0, 0, Common.BUTTON_WIDTH, Common.BUTTON_HEIGHT);
	button.buttonMode = true;
	border.addChild(button);
}

private function displayRightButton():void {
	var border:Sprite = new Sprite();
	border.x = Common.RBUTTON_X;
	border.y = Common.RBUTTON_Y;
	border.graphics.lineStyle(3, Common.BUTTON_OUTLINE);
	border.graphics.beginFill(Common.BUTTON_FILL, 1.0);
	border.graphics.drawRoundRect(0, 0, Common.BUTTON_WIDTH, Common.BUTTON_HEIGHT, Common.BUTTON_HEIGHT);
	base.addChild(border);
	
	// button text
	var textStyle:TextFormat = new TextFormat();
	textStyle.font = "Calibri";
	textStyle.size = Common.BUTTON_FONT_SIZE;
	textStyle.align = "center";
	textStyle.color = 0xFFFFFF;
	
	var myText:TextField = new TextField();
	myText.width = Common.BUTTON_WIDTH;	
	myText.height = Common.BUTTON_HEIGHT;
	myText.y = Common.BUTTON_TEXT_Y;
	myText.text = "Next travel day >>";
	myText.setTextFormat(textStyle);
	border.addChild(myText);
	
	// top layer sprite for mouse interaction
	var button:Sprite = new Sprite();
	button.graphics.beginFill(Common.BUTTON_FILL, 0.0);
	button.graphics.drawRect(0, 0, Common.BUTTON_WIDTH, Common.BUTTON_HEIGHT);
	button.buttonMode = true;
	border.addChild(button);
}

/**
 *  DEV ONLY: draw a border so we can see where the end of the flash is
 */
private function drawBorder():void {
	var border:Sprite = new Sprite();
	border.graphics.lineStyle(5, 0x0000AA);
	border.graphics.drawRect(0, 0, 1024, 768);
	base.addChild(border);
}

// *****************************************************
// ******************** MOUSE STUFF ********************
// *****************************************************
public function onMouseOver(event:MouseEvent):void {
	var mouseTarget:Object = event.target;
	
	if(mouseTarget is Sprite) {
		
	}
}

public function onMouseOut(event:MouseEvent):void {
}

public function onMouseUp(event:MouseEvent):void {
	var mouseTarget:Object = event.target;
	
	if(mouseTarget is Sprite) {
		if(mouseTarget.name == Common.PIC_FORWARD_BUTTON) {
			g_currPage++;
			redrawPictures(g_currPage);
		} else if(mouseTarget.name == Common.PIC_BACK_BUTTON) {
			g_currPage--;
			redrawPictures(g_currPage);
		}
	}
}

public function toggleFullRes(pic:Sprite):void {
	//			if(!isFullRes) {
	//				isFullRes = true;
	//				
	//				// increase the size of the thumbnail
	//				var fullResTween:Tween = new Tween(pic, 0.3, 
	//					{
	//						x: 0,
	//						y: 0,
	//						width: 800,
	//						height: 600
	//					}
	//				);
	//				fullResTween.play();	// zoom in
	//			} else {
	//				isFullRes = false;
	//			}
}

